
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import { Navigator } from 'react-native-deprecated-custom-components';
import Home from '../Home/home';
import Mine from '../Mine/mine';
import More from '../More/more';
import Shop from '../Shop/shop';
export default class Main extends Component {
  constructor(props){
    super(props);
    this.state = {
      selectedTab:'home',
    }
  }
  render() {
    return (
      <TabNavigator tabBarStyle={styles.tab} >  
        {this.renderTabBarItem('首页','icon_tabbar_homepage','icon_tabbar_homepage_selected','home','首页',Home)}
        {this.renderTabBarItem('商家','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','shop','商家',Shop)}
        {this.renderTabBarItem('我的','icon_tabbar_mine','icon_tabbar_mine_selected','mine','我的',Mine)}
        {this.renderTabBarItem('更多','icon_tabbar_misc','icon_tabbar_misc_selected','more','更多',More)}
      </TabNavigator>  
    );
  }
  renderTabBarItem(title,icon_name,icon_name_selected,selectedTab,componentName,Component){
    return (
      <TabNavigator.Item  
          title={title}
          selected={this.state.selectedTab === selectedTab}  
          selectedTitleStyle={styles.selectedTitleStyle}
          onPress={() => this.setState({ selectedTab: selectedTab})}
          renderIcon={() => <Image style={styles.iconStyle} source={{uri:icon_name}} />}  
          renderSelectedIcon={() => <Image style={styles.iconStyle} source={{uri:icon_name_selected}} />}  
          >
          <Navigator
            initialRoute={{name:componentName,component:Component,
            }}
            configureScene={(route)=>{
              return Navigator.SceneConfigs.PushFromRight;
            }}
            renderScene={(route,navigator)=>{
              let Component = route.component;
              return <Component {...route.params} navigator={navigator}/>
            }}
          />
        </TabNavigator.Item>  
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  iconStyle:{
    width:Platform === 'ios' ? 30:25,
    height:Platform === 'ios' ? 30:25,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  selectedTitleStyle:{
    color:'#ED5100',
  }
});
